<style lang="scss">
  .ds-list {
    width: 100%;
    margin-top: 20px;
  }

  .ds-table-list {
    border: 1px solid #ccc;
    overflow: hidden;
    border-radius: 4px;
    .list-item {
      padding: 7px 20px;
      border-bottom: 1px solid #ccc;
      background: #fff;
      &:nth-child(2n) {
        background: #f5f5f5;
      }
      &:last-child {
        border-bottom: 0;
      }
    }
  }
</style>
<template>
  <div>
    <div class="container">
      <h3 class="clearfix">
        数据源列表
        <span class="pull-right">
          <el-button @click="addDataSource" size="small">增加</el-button>
        </span>
      </h3>

      <el-table
        :data="dataSourceList" class="ds-list">


        <el-table-column
          label="数据源名称"
          prop="name">
        </el-table-column>
        <el-table-column
          label="描述"
          prop="detail">
        </el-table-column>
        <el-table-column
          label="操作"
          width="100">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="editDataSource(scope.row)">修改</el-button>
            <t-remove :item="scope" @removed="deleteItem">
              <el-button type="text" size="small">删除</el-button>
            </t-remove>
          </template>
        </el-table-column>
      </el-table>


    </div>
    <page-right :show="showRight" @right-close="resetRightBox">
      <edit-form @close="showRight=false" :form="currentDataSource" @change="itemChange"></edit-form>
    </page-right>
  </div>
</template>

<script>
  import editForm from './form/form.vue';
  import {http, datasource, dataset} from '@/resources';

  export default {
    components: {
      editForm
    },
    data() {
      return {
        currentDataSource: [],
        showRight: false,
        dataSourceList: []
      };
    },
    computed: {
      pathUrl: function () {
        let path = this.$route.path;
        return path.substr(0, path.lastIndexOf('/') + 1);
      }
    },
    mounted() {
      this.getDataSourceList();
    },
    methods: {
      getDataSourceList() {
        datasource.query({projectId: this.$route.params.projectId}).then(res => {
          this.dataSourceList = res.data.data;

        });
      },
      addDataSource() {
        this.showRight = true;
      },
      editDataSource(ds) {
        this.currentDataSource = ds;
        this.showRight = true;
      },
      deleteItem(item) {
        datasource.delete(item.row.datasourceId).then(res => {
          this.dataSourceList.splice(item.$index, 1);
        });
      },
      resetRightBox() {
        this.currentDataSource = {};
        this.showRight = false;
      },
      itemChange: function (e) {
      }
    }
  };

</script>
